import {observer} from "mobx-react";
import {themeInstance} from "../utils/theme";
import {useEffect} from "react";

export const Description: React.FC = observer(() => {
    const setIframeColor = ()=>{
        const isDark = themeInstance.currentTheme === 'dark';
        const iframe = document.querySelector('iframe');
        const innerDoc = iframe?.contentDocument || iframe?.contentWindow?.document;
        if (innerDoc) {
            const elements = innerDoc.querySelectorAll('*');
            elements.forEach(element=>{
                (element as HTMLElement).style.backgroundColor = isDark?'black':'#ffffff';
                (element as HTMLElement).style.color = isDark?'white':'black';
            });
        }
    }
    useEffect(()=>{
        setIframeColor();
    },[themeInstance.currentTheme]);
    return (
        <>
            <iframe src='/description.html' style={{border: 'none'}} width='100%' height='800px' onLoad={setIframeColor}></iframe>
        </>
    );
});